<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>操作元素</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        body {
            font-size: 30px;
            line-height: 45px;
        }
    </style>
</head>
<body>
    <div class="box">这是box原本的内容</div>

    ==================
    <p class="text">举头望明月</p>

    <div></div>
    <p class="replace">这段文本可以点击更改</p>

    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        /*
        $ele.
            before(content) 插入到元素之前
            after(content)  插入到元素之后
            prepend(content) 插入到元素第一个子节点之前
            append(content)  插入到元素最后一个子节点之后
            repalceWith(content)  替换当前元素 

        content: text文本  /  DOM  /  jQ对象  /  HTML文本
        如果添加的内容在页面已经存在，会消失，被添加到对应的位置
        */     
       
        var $box = $(".box");

        $box.before("床前明月光");

        var pEle = document.createElement("p");
        pEle.innerText = "疑是地上霜";
        $box.prepend(pEle);

        $box.append($(".text"));

        $box.after("<p>低头思故乡</p>");

        $box.replaceWith("<p>桃花潭水深千尺，<br>不及汪伦送我情。</p>");


        // contenteditable
        var $replace = $(".replace");
        $replace[0].onclick = function (){
            // this 指的是点击的DOM元素 -> .replace   $(DOM) => $DOM
            $(this).replaceWith(`<input onblur="deal()" type="text" value="${ this.innerText }">`);    
        }

        function deal(){
            $replace[0].innerText = event.target.value;
            $(event.target).replaceWith($replace);
        }
    </script>
</body>
</html>